<template>
  <div class="data-page">
    <div class="window-wrapper" @click="wrapper"  v-show="isShow">
      <div class="window">
        <div @click="view(build)" class="pointBtn" v-for="build in builds">{{build.build}}</div>
      </div>
    </div>
    <div class="window-wrapper" @click="buileInfoClick"  v-show="buildInfo">
      <div class="window">
        <div class="currentBuildName">{{currentBuild.build}}</div>
        <ve-bar :data="buildStatisticData" :settings="chartSettings" :extend="extend" width="600px" height="400px"></ve-bar>
      </div>
    </div>
    <div class="window-wrapper" @click="homeWindowBtn"  v-show="homeWindow">
      <div class="home-window" @click ="homeWindow = true">
        <table class="table">
          <thead>
          <tr>
            <th width="100px">家庭户主</th>
            <th width="100px">家庭属性</th>
            <th width="100px">致贫原因</th>
            <th width="80px">计划脱贫年度</th>
            <th width="100px">扶贫干部</th>
            <th width="150px">扶贫干部电话</th>
            <th width="160px">迁入房间</th>
            <th width="100px">迁出镇</th>
            <th width="100px">迁出村</th>
            <th width="100px">迁出组</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in homes" @click="viewhomeInfo(item)">
            <td>{{item.name}}</td>
            <td>{{item.property | property}}</td>
            <td>{{item.reason}}</td>
            <td>{{item.year_poor}}</td>
            <td>{{item.admin}}</td>
            <td>{{item.admin_mobile}}</td>
            <td>{{item.room.build}}-{{item.room.unit}}-{{item.room.level}}-{{item.room.number}}</td>
            <td>{{item.a}}</td>
            <td>{{item.b}}</td>
            <td>{{item.c}}</td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="window-wrapper" @click = "homeInfo = false"  v-show="homeInfo">
      <div class="window">
        asdfasdfa
      </div>
    </div>
    <dheader></dheader>
    <div class="data-content">
      <div>
        <div class="data-time">
          余庆县
        </div>
        <div class="data-time pointName">
          {{pointStatistic.name}}
        </div>
        <div class="viewBuild" @click="viewBuild">查看各楼栋信息</div>
        <div class="viewBuild" @click="viewHome">查看家庭信息</div>
      </div>
      <div class="data-main">
        <div class="main-left">
          <left :pointId="this.$route.params.pointId"></left>
        </div>
        <div class="main-center">
          <dcontent :pointStatistic="pointStatistic"></dcontent>
        </div>
        <div class="main-right">
          <dright :pointStatistic="pointStatistic"></dright>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import dheader from './dheader'
  import left from './left'
  import dcontent from './dcontent'
  import dright from './dright'
  import axios from 'axios'
  import {host} from '@/config.js'

  export default {
    components: {
      dheader,
      left,
      dcontent,
      dright
    },
    data() {
      this.chartSettings={
        dimension: ['名称'],
        metrics: ['数量']
      }
      this.extend = {
        series: {
          label: {
            normal: {
              show: true
            }
          }
        },
        legend:{
          textStyle: {color: '#fff'},
          right: '6%',
          show:false,
        },
        yAxis:
          {
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          },
        xAxis:
          {
            axisLabel: {
              textStyle: {
                color: '#fff'
              }
            }
          }
      }
      return {
        pointStatistic: {},
        isShow: false,
        builds:[],
        currentBuild:{},
        buildInfo:false,
        homeWindow:false,
        homes:[],
        homeInfo:false,
      }
    },
    created() {
      const that = this
      axios.get(host+`/pointStatistics/${that.$route.params.pointId}/`).then(response => {
        //console.log(response.data)
        that.pointStatistic = response.data
      }).catch(error => {
        console.log(error)
      })
      axios.get(host+`/point/allBuild/?point=${that.$route.params.pointId}`).then(response => {
        that.builds = response.data
      }).catch(error => {
        console.log(error)
      })
    },
    methods: {
      viewBuild(){
        this.isShow = true
      },
      wrapper(){
        this.isShow = false
      },
      view(build){
        this.currentBuild = build
        //console.log(build)
        this.isShow = false
        this.buildInfo = true
        console.log(this.currentBuild)
      },
      buileInfoClick(){
        this.buildInfo = false
      },
      homeWindowBtn(){
        this.homeWindow=false
      },
      viewHome(){
        this.homeWindow = true
        const that = this
        axios.get(host+`/home/?room__point=${that.$route.params.pointId}&page_size=1000`).then(response=>{
          that.homes = response.data.results
          //console.log(that.homes)
        }).catch(error=>{
          console.log(error)
        })
      },
      viewhomeInfo(home){
        //this.homeInfo = true
      }
    },
    computed:{
      buildStatisticData(){
        return {
          columns: ['名称', '数量'],
          rows: [
            { '名称': '党员', '数量': this.currentBuild.partyMemeber_count},
            { '名称': '劳动力', '数量': this.currentBuild.labor_count},
            { '名称': '学生', '数量': this.currentBuild.student1_count+this.pointStatistic.student2_count+this.pointStatistic.student3_count+this.pointStatistic.student4_count},
            { '名称': '留守儿童', '数量': this.currentBuild.leftBehindchild_count},
            { '名称': '留守妇女', '数量': this.currentBuild.leftBehindWoman_count},
            { '名称': '留守老人', '数量': this.currentBuild.restOldMan_count},
            { '名称': '60—80岁人口', '数量': this.currentBuild.oldMan_60_count},
            { '名称': '社会保障人口', '数量': this.currentBuild.baseLivingAllowance_village_count+this.pointStatistic.baseLivingAllowance_city_count}
          ]
        }
      }
    },
    filters:{
      property(x){
        if(x == 1)
          return "贫困"
        else if (x == 2)
          return "城乡低保"
        else
          return "不贫困"
      }
    }
  }
</script>

<style lang="scss" scoped>
  .data-page {
    background: url(../../assets/data/true.png) repeat-x;
    top: 0;
    right: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    min-width: 1220px;
    .data-content {
      padding-top: 20px;
      padding-bottom: 20px;
      .data-time , .viewBuild{
        display: inline-block;
        width: 100px;
        height: 35px;
        background-color: #2C58A6;
        line-height: 35px;
        color: #fff;
        font-size: 12.8px;
        margin-bottom: 25px;
        margin-left: 20px;
        text-align: center;
      }
      .pointName {
        width: 350px;
        background-color: #EA5149;
      }
      .viewBuild{
        width: 150px;
        cursor: pointer;
      }
      .data-main {
        width: calc(100% - 40px);
        margin-bottom: 40px;
        margin-left: 20px;
        height: 720px;

        .main-left {
          width: 24%;
          float: left;
        }
        .main-center {
          float: left;
          width: 50%;
          padding: 0 20px 0 20px;

        }
        .main-right {
          float: left;
          width: 26%;
          height: 615px;
        }
      }
    }
    .window-wrapper {
      display: block;
      position: absolute;
      position: fixed;
      background-color: rgba(0,0,0,0.6);
      z-index: 99999;
      width: 100%;
      height: 100vh;
      .window,.home-window{
        background-color: #3695CC;
        margin:200px auto;
        padding: 10px 10px;
        border-radius: 5px;
        color: #fff;
        width: 700px;
      }
      .home-window{
        background-color: rgba(54, 149, 204,0.2);
        max-height:500px;
        width: 1150px;
        margin:50px auto;
        overflow-y: scroll;
      }
    }
  }
  .pointBtn{
    display:inline-block;
    text-align: center;
    width: 150px;
    height:30px;
    background-color: #ea5149;
    margin: 5px 10px;
    cursor: pointer;
  }
  .currentBuildName{
    text-align: center;
  }
  .table{
    font-size:18px;
  }
</style>
